<template>
	<el-dialog @close="btnCancel" title="分配角色" :visible="showRoleDialog">
		<!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
		<el-checkbox-group v-model="roleIds">
			<el-checkbox v-for="item in list" :key="item.id" :label="item.id">
				{{
		          item.name
		        }}
			</el-checkbox>
		</el-checkbox-group>
		<el-row slot="footer" type="flex" justify="center">
			<el-col :span="6">
				<el-button @click="btnOK" type="primary" size="small">确定</el-button>
				<el-button @click="btnCancel" size="small">取消</el-button>
			</el-col>
		</el-row>
	</el-dialog>
</template>

<script>
	import {assignRoles} from '@/api/employees.js'
	
	import {
		getRoleList
	} from '@/api/setting'
	import {
		getUserDetailById
	} from '@/api/user'

	export default {
		props: {
			showRoleDialog: {
				type: Boolean,
				default: false
			},
			// 用户的id 用来查询当前用户的角色信息
			userId: {
				type: String,
				default: null
			}
		},

		data() {
			return {
				list: [], // 角色列表
				roleIds: []
			}
		},

		created() {
			this.getRoleList()
		},

		methods: {
			//  获取所有角色
			async getRoleList() {
				const {
					rows
				} = await getRoleList()
				this.list = rows
			},

			async getUserDetailById(id) {
				const {
					roleIds
				} = await getUserDetailById(id)
				this.roleIds = roleIds // 赋值本用户的角色
			},

			async btnOK() {
				await assignRoles({
					id: this.userId,
					roleIds: this.roleIds
				})
				this.$message.success('修改角色信息成功')
				//   关闭窗体
				this.$emit('update:showRoleDialog', false)
			},

			btnCancel() {
				this.roleIds = [] // 清空原来的数组
				this.$emit('update:showRoleDialog', false)
			},
		}
	}
</script>
